<template>
  <div class="tempbigbox">
    <div class="console">
      <StudentCard :data-list="dataList" :key="topKey"></StudentCard>
      <div class="column column2">
        <div class="page-content">
          <div class="header" style="margin-bottom: 1.5rem">
            <h3>学员管理</h3>
          </div>
          <el-form :model="searchForm" ref="searchFormRef" label-width="auto" style="padding-bottom: 1.5rem">
            <el-row :gutter="24">
              <el-col :span="6">
                <el-form-item label="学员名称：" prop="name">
                  <el-input placeholder="请输入学员名称" v-model="searchForm.name" clearable @blur="getData"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="手机号：" prop="phone">
                  <el-input placeholder="请输入手机号" v-model="searchForm.phone" clearable @blur="getData"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="报考车型：" prop="carModelName">
                  <el-select v-model="searchForm.carModelName" placeholder="请选择报考车型" clearable @change="getData">
                    <el-option v-for="item in carsList" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="是否会员：" prop="level">
                  <el-select v-model="searchForm.level" placeholder="请选择是否会员" clearable @change="getData">
                    <el-option v-for="item in levelOptions" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <!-- 创建日期筛选 -->
              <el-col :span="6">
                <div class="databox">
                  <label class="el-form-item__label">创建时间：</label>
                  <el-date-picker label="创建时间：" v-model="datavalue1" type="datetimerange" start-placeholder="开始日期"
                    end-placeholder="结束日期" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
                    time-format="A hh:mm:ss" @change="createTime" />
                </div>
              </el-col>
              <el-col :span="6">
                <div class="databox">
                  <label class="el-form-item__label">最近活跃时间：</label>
                  <el-date-picker label="创建时间：:" v-model="datavalue2" type="datetimerange" start-placeholder="开始日期"
                    end-placeholder="结束日期" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
                    time-format="A hh:mm:ss" @change="activeTime" />
                </div>
              </el-col>
            </el-row>
          </el-form>

          <div style="margin-top: 20px;">
            <!-- <el-button type="primary" @click="search">搜索</el-button>
            <el-button @click="resetForm(searchFormRef)" v-ripple>重置</el-button> -->
            <el-button @click="openDialogVisable">新增学员</el-button>
            <el-button @click="addExamTime">新增考试时间</el-button>
          </div>

          <art-table :data="tableData" selection :loading="tableLoading" :currentPage="pageNum" :pageSize="pageSize"
            :total="pageTotal" @current-change="currentChange" @size-change="sizeChange">
            <template #default>
              <el-table-column label="学员姓名" prop="avatar" #default="scope" width="100px" v-if="columns[0].show"
                align="center" style="cursor: pointer">
                <div class="user" style="display: flex; align-items: center; cursor: pointer"
                  @click="linkuserdetails()">
                  <img class="avatar" :src="scope.row.avatar" v-if="scope.row.avatar" />
                  <div>
                    <el-dropdown placement="top-end">
                      <el-link underline="never">{{ scope.row.realName }}</el-link>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <!-- <el-dropdown-item>
                      <p>{{ scope.row.realName }} ID:{{ scope.row.id }}</p>
                    </el-dropdown-item> -->
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                    <!-- <p class="email">ID:{{ scope.row.id }}</p> -->
                  </div>
                </div>
              </el-table-column>
              <el-table-column label="证件号" prop="idNumber" align="center" />
              <el-table-column label="联系电话" prop="mobile" align="center" />
              <el-table-column label="报考车型" prop="carModelName" align="center" />
              <el-table-column label="当前考试科目" prop="nowExam" align="center">
                <template #default="scope">
                  <span v-if="scope.row.nowExam == 1">科目一</span>
                  <span v-if="scope.row.nowExam == 2">科目二</span>
                  <span v-if="scope.row.nowExam == 3">科目三</span>
                  <span v-if="scope.row.nowExam == 4">科目四</span>
                </template>
              </el-table-column>
              <el-table-column label="报考状态" prop="applyState" align="center">
                <template #default="scope">
                  <span v-if="scope.row.applyState == 0">未报名</span>
                  <span v-if="scope.row.applyState == 1">已报名</span>
                </template>
              </el-table-column>
              <el-table-column label="考试时间" prop="nowExamTime" align="center">
                <template #default="scope">
                  {{ scope.row.nowExamTime && scope.row.nowExamTime.slice(0, 10) }}
                </template>
              </el-table-column>
              <el-table-column label="已通过科目" prop="noExam" align="center">
                <template #default="scope">
                  <div class="grid">
                    <span v-for="num in examType" :key="num" :class="{
                      noExam: !isNoExam(scope.row.noExam, num),
                      examined: isNoExam(scope.row.noExam, num)
                    }">
                      {{ num }}
                    </span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="班型" prop="storePackageName" align="center" />
              <el-table-column label="招生员" prop="recruitingSpecialistName" align="center" />
              <el-table-column label="报名日期" prop="applyTime" sortable v-if="columns[5].show" align="center">
                <template #default="scope">
                  {{ scope.row.applyTime && scope.row.applyTime.slice(0, 10) }}
                </template>
              </el-table-column>
              <el-table-column label="缴费状态" prop="payState" align="center">
                <template #default="scope">
                  <span v-if="scope.row.payState == 0">未缴费</span>
                  <span v-if="scope.row.payState == 1">已缴费</span>
                </template>
              </el-table-column>
              <el-table-column label="是否vip" prop="isVip" :filters="[
                { text: '是', value: '1' },
                { text: '不是', value: '0' }
              ]" :filter-method="filterTag" filter-placement="bottom-end" v-if="columns[4].show" align="center">
                <template #default="scope">
                  <el-tag :type="getTagType(scope.row.isVip)">
                    {{ buildTagText(scope.row.isVip) }}
                  </el-tag>
                </template>
              </el-table-column>
              <!-- 创建时间 -->
              <el-table-column label="创建时间" prop="createTime" sortable v-if="columns[5].show" align="center" />
              <el-table-column fixed="right" label="操作" width="250px" align="center">
                <template #default="scope">
                  <el-tooltip class="box-item" effect="dark" content="编辑" placement="top-start">
                    <button-table type="edit" @click="buttonMoreClick(scope.row)" />
                  </el-tooltip>
                  <el-tooltip class="box-item" effect="dark" content="练习记录" placement="top-start">
                    <button-table type="record" @click="openStudentsInfo(scope.row.memberId)" />
                  </el-tooltip>
                  <el-tooltip class="box-item" effect="dark" content="修改密码" placement="top-start">
                    <button-table type="editPassword" @click="editPassword(scope.row)" />
                  </el-tooltip>
                </template>
              </el-table-column>
            </template>
          </art-table>
          <el-dialog v-model="addStudentDialogVisable" :title="studentTitle" width="1300"
            :before-close="handleCloseAddStudent" :close-on-click-modal="false">
            <addStudentDialog v-if="addStudentDialogVisable" :key="dialogType + (editList.id || 'new')"
              :sign-list="signList" @close="handleCloseAddStudent" :enroll-list="enrollList" :cards-list="carsList"
              :class-list="classList" :user-list="userList" :onSuccess="getData" :edit-list="editList"
              :coach-list="coachList">
            </addStudentDialog>
          </el-dialog>
          <el-dialog v-model="passDialogVisible" title="更改密码" width="25%" :close-on-click-modal="false">
            <el-alert title="此密码仅做为学员PC端登录使用，初始密码为：123456" type="primary" style="margin-bottom: 20px;margin-top: -20px;"
              :closable="false" />
            <el-form ref="formRef" :model="pwdForm" :rules="rules" label-width="120px">
              <el-form-item label="新密码" prop="newPassword">
                <el-input v-model="pwdForm.newPassword" type="password" show-password />
              </el-form-item>
              <el-form-item label="确认新密码" prop="confirmPassword">
                <el-input v-model="pwdForm.confirmPassword" type="password" show-password />
              </el-form-item>
            </el-form>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="passDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="passHandleSubmit">提交</el-button>
              </div>
            </template>
          </el-dialog>
          <el-dialog v-model="userListDialogVisable" title="练习记录" width="1200" :close-on-click-modal="false">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
              <el-tab-pane label="学习记录" name="0">
                <learnRecord></learnRecord>
              </el-tab-pane>
              <el-tab-pane label="模拟考试成绩" name="1">
                <simulateExam :simulatedExam="simulatedExam" :key="simulatedKey"></simulateExam>
              </el-tab-pane>
              <el-tab-pane label="考试记录" name="2">
                <examRecords></examRecords>
              </el-tab-pane>
            </el-tabs>
          </el-dialog>
          <el-dialog v-model="examDialogVisible" title="报考学员" width="30%" v-if="examDialogVisible"
            :close-on-click-modal="false">
            <el-form :model="examStudents" label-width="82px">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="报考车型" prop="carModelName">
                    <el-select v-model="examStudents.carModelId" placeholder="请选择报考车型" @change="carChange">
                      <el-option v-for="item in carsList" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="题目类型" prop="carType">
                    <el-select v-model="examStudents.nowExam" placeholder="请选择题目类型" @change="questionChange">
                      <el-option label="科目一" value="1" />
                      <el-option label="科目二" value="2" />
                      <el-option label="科目三" value="3" />
                      <el-option label="科目四" value="4" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="考试时间">
                    <el-date-picker v-model="examDate" type="date" placeholder="请选择考试时间" @change="examTimeChange" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <art-table :data="examUserData" selection :loading="tableLoading" :currentPage="pageNum"
              :pageSize="pageSize" :total="pageTotal" @current-change="currentChange" @size-change="sizeChange"
              @selection-change="handleSelectionChange">
              <template #default>
                <!-- <el-table-column type="selection" width="55" align="center" /> -->
                <el-table-column label="ID" prop="id" align="center" />
                <el-table-column label="学员姓名" prop="realName" align="center" />
                <el-table-column label="联系电话" prop="mobile" align="center" />
              </template>
            </art-table>
            <template #footer>
              <div class="dialog-footer">
                <el-button type="primary" @click="submitExam">确认</el-button>
                <el-button @click="examDialogVisible = false">
                  取消
                </el-button>
              </div>
            </template>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>

</template>

<script setup lang="ts">
import { FormInstance } from 'element-plus'
import { ElMessageBox, ElMessage } from 'element-plus'
import type { FormRules } from 'element-plus'
import { useRouter } from 'vue-router'
import addStudentDialog from './addStudentDialog.vue'
import {
  SignUpList,
  enrollStudents,
  cardsType,
  classType,
  userGroup,
  studentsFiles,
  studentStatistics,
  resetPassword,
  addExamDate,
  coachData,
  practiceRecord
} from '@/api/userStudentsApi'
import type { TabsPaneContext } from 'element-plus'
import learnRecord from './dialog/learnRecord.vue'
import simulateExam from './dialog/simulateExam.vue'
import examRecords from './dialog/examRecords.vue'
import StudentCard from './widget/StudentCard.vue'
import { Key, TurnOff } from '@element-plus/icons-vue'
// import { editPassword } from '@/api/ApiList'

const dialogType = ref('add')
const dialogVisible = ref(false)
const datavalue1 = ref('') //创建时间：
const datavalue2 = ref('') //最近活跃时间：
const router = useRouter() // 使用useRouter获取路由实例
const addStudentDialogVisable = ref(false)
const passDialogVisible = ref(false)
const examType = [1, 2, 3, 4]
const userListDialogVisable = ref(false)
const activeName = ref<string>('0')
const examDialogVisible = ref(false)
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
const isNoExam = (noExamString: any, subjectNum: any) => {
  if (!noExamString) return false
  return noExamString.split(',').includes(String(subjectNum))
}


// 重复密码的验证
const validatePasswordMatch = (rule: any, value: string, callback: (error?: Error) => void) => {
  if (value !== pwdForm.newPassword) {
    callback(new Error('两次密码不一致！'))
  } else {
    callback()
  }
}

const rules = reactive<FormRules>({
  username: [
    { required: true, message: '请输入学员名称', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { min: 11, max: 11, pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }
  ],
  sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
  dep: [{ required: true, message: '请选择来源', trigger: 'change' }],
  newPassword: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  confirmPassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    { validator: validatePasswordMatch, trigger: 'blur' }
  ]
})

const formData = reactive({
  username: '',
  phone: '',
  sex: '',
  dep: ''
})
const examStudents = reactive({
  carModelId: '',
  nowExam: ''
})
const examUserData = ref([])
const studentTitle = ref('新增学员')
const levelOptions = [
  {
    value: '1',
    label: '会员用户'
  },
  {
    value: '0',
    label: ' 普通用户'
  }
]

const columns = reactive([
  { name: '用户信息', show: true },
  { name: '手机号', show: true },
  { name: '性别', show: true },
  { name: '来源', show: true },
  { name: '状态', show: true },
  { name: '创建日期', show: true }
])
const pwdForm = reactive({
  newPassword: '',
  confirmPassword: ''
})
const searchFormRef = ref<FormInstance>()
const searchForm = reactive({
  name: '',
  phone: '',
  id: '',
  account: '',
  sex: '',
  level: '',
  creatStartTime: '',
  creatEndTime: '',
  activeStartTime: '',
  activeEndTime: '',
  carModelName: ''
})

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  searchForm.name = ''
  searchForm.phone = ''
  searchForm.carModelName = ''
  searchForm.level = ''
  searchForm.creatStartTime = ''
  searchForm.creatEndTime = ''
  searchForm.activeStartTime = ''
  searchForm.activeEndTime = ''
  datavalue1.value = ''
  datavalue2.value = ''
}

const tableData = ref([])
//编辑用户
// const showDialog = (type: string, row?: any) => {
//   dialogVisible.value = true
//   dialogType.value = type

//   if (type === 'edit' && row) {
//     formData.username = row.username
//     formData.phone = row.mobile
//     formData.sex = row.sex === 1 ? '男' : '女'
//     formData.dep = row.dep
//   } else {
//     formData.username = ''
//     formData.phone = ''
//     formData.sex = '男'
//     formData.dep = ''
//   }
// }
const linkuserdetails = function () {
  // setTimeout(() => {
  //   router.push('/user_student/UserDetails')
  // }, 300)
}


const search = () => {
  getData()
}

const changeColumn = (list: any) => {
  columns.values = list
}

const filterTag = (value: string, row: any) => {
  return row.status === value
}

const getTagType = (status: number) => {
  switch (status) {
    case 1:
      return 'success'
    case 0:
      return 'info'
  }
}

const buildTagText = (status: number) => {
  let text = ''
  if (status === 1) {
    text = '是'
  } else if (status === 0) {
    text = '否'
  }
  return text
}

const formRef = ref<FormInstance>()

const handleSubmit = async () => {
  if (!formRef.value) return

  try {
    await formRef.value.validate()
    ElMessage.success(dialogType.value === 'add' ? '添加成功' : '更新成功')
    dialogVisible.value = false
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}
const editId = ref('')
const editPassword = (row: any) => {
  passDialogVisible.value = true
  editId.value = row.memberId
}

const passHandleSubmit = async () => {
  if (!formRef.value) return
  try {
    await formRef.value.validate(async (valid) => {
      if (valid) {
        try {
          const { code, data, msg } = await resetPassword(Number(editId.value), pwdForm.newPassword)
          if (code === '00000') {
            // 这里添加修改密码的API调用
            ElMessage.success('密码修改成功')
            passDialogVisible.value = false
            pwdForm.newPassword = ''
            pwdForm.confirmPassword = ''
          } else {
            ElMessage.error(msg)
          }
        } catch (e) {
        } finally {
        }
      }
    })

  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

function handleCloseAddStudent() {
  addStudentDialogVisable.value = false
}

const simulatedExam = ref([])
const simulatedKey = ref(0)

const getLearnRecordData = async (id: string) => {
  const res = await practiceRecord({ memberId: id })
  if (res.code === '00000' && res.data) {
    simulatedExam.value = res.data.memberExamRecordList
    simulatedKey.value = new Date().getDate()
  }
}

const openStudentsInfo = async (id: string) => {
  userListDialogVisable.value = true
  getLearnRecordData(id)
}

const openDialogVisable = () => {
  studentTitle.value = '新增学员'
  // 清空编辑数据，触发子组件重置
  editList.value = {}
  dialogType.value = 'add'
  addStudentDialogVisable.value = true
  getSignUp()
  getEnrollList()
  getCardsTypeList()
  getClassTypeList()
  getUserList()
  getCoachData()
}
const signList = ref([])
const getSignUp = async () => {
  const res = await SignUpList()
  signList.value = res.data
}
const enrollList = ref([])
const getEnrollList = async () => {
  const res = await enrollStudents()
  enrollList.value = res.data
}

interface carItem {
  value: string
  label: string
}
const carsList = ref<carItem[]>([])
const getCardsTypeList = async () => {
  const res = await cardsType()
  carsList.value = res.data
}
const classList = ref([])
const getClassTypeList = async () => {
  const res = await classType()
  classList.value = res.data
}
const userList = ref([])
const getUserList = async () => {
  const res = await userGroup()
  userList.value = res.data
}
const coachList = ref([])
const getCoachData = async () => {
  const res = await coachData()
  coachList.value = res.data
}
const editList = ref<any>({})
const showDialog = (type: string, row?: any) => {
  addStudentDialogVisable.value = true
  dialogType.value = type
  editList.value = row

  if (type === 'edit' && row) {
    // form.id = row.id
    studentTitle.value = '编辑学员'
    getSignUp()
    getEnrollList()
    getCardsTypeList()
    getClassTypeList()
    getUserList()
    getCoachData()
  } else {
    // 新增时确保 editList 为空对象
    editList.value = {}
  }
}

const buttonMoreClick = (row: any) => {
  showDialog('edit', row)
  Object.assign(formData, {
    rsName: row.rsName,
    sortOrder: row.sortOrder,
    rsPhone: row.rsPhone,
    recruitmentChannel: row.recruitmentChannel
  })
}

const deleteRole = (id: number) => {
  ElMessageBox.confirm('确定删除该学员吗？', '删除确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'error'
  }).then(async () => {
    // const res = await DelStudents(id)
    // if (res.code === '00000') {
    //   getData();
    //   ElMessage.success('删除成功')
    // }
  })
}

const permissionDialog = ref(false)
const showPermissionDialog = () => {
  permissionDialog.value = true
}

const tableLoading = ref(false)
const pageNum = ref(1)
const pageSize = ref(10)
const pageTotal = ref(0)
async function getData() {
  try {
    tableLoading.value = true
    const { code, data } = await studentsFiles(filterEmptyValues({
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      queryStartTime: searchForm.creatStartTime ? formatDate(searchForm.creatStartTime) : '',
      queryEndTime: searchForm.creatEndTime ? formatDate(searchForm.creatEndTime) : '',
      queryName: searchForm.name,
      queryMobile: searchForm.phone,
      queryIsVip: searchForm.level,
      queryStartActiveTime: searchForm.activeStartTime
        ? formatDate(searchForm.activeStartTime)
        : '',
      queryEndActiveTime: searchForm.activeEndTime ? formatDate(searchForm.activeEndTime) : '',
      carModelId: searchForm.carModelName
    }))
    if (code === '00000' && data) {
      tableData.value = data.list
      pageTotal.value = data.total
      console.log(tableData.value, 'tableData.value')
    }
  } catch (e) {
  } finally {
    tableLoading.value = false
  }
}
const createTime = (e: any) => {
  if (e) {
    searchForm.creatStartTime = e[0]
    searchForm.creatEndTime = e[1]
  } else {
    searchForm.creatStartTime = ''
    searchForm.creatEndTime = ''
  }
  getData()
}
const activeTime = (e: any) => {
  if (e) {
    searchForm.activeStartTime = e[0]
    searchForm.activeEndTime = e[1]
  } else {
    searchForm.activeStartTime = ''
    searchForm.activeEndTime = ''
  }
  getData()
}
const formatDate = (date: string) => {
  return new Date(date)
    .toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    })
    .replace(/\//g, '-')
}
const currentChange = (val: number) => {
  pageNum.value = val
  getData()
}
const filterEmptyValues = (obj: any) => {
  const result: any = {}
  for (const key in obj) {
    if (obj[key] !== '' && obj[key] !== null && obj[key] !== undefined) {
      result[key] = obj[key]
    }
  }
  return result
}

async function examList() {
  try {
    tableLoading.value = true
    const params = filterEmptyValues(examStudents)
    const { code, data } = await studentsFiles({
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      ...params
    })
    if (code === '00000' && data) {
      examUserData.value = data.list
      pageTotal.value = data.total
      console.log(tableData.value, 'tableData.value')
    }
  } catch (e) {
  } finally {
    tableLoading.value = false
  }
}
const addExamTime = () => {
  examDialogVisible.value = true
  examList()
  getCardsTypeList()
}
const sizeChange = (val: number) => {
  pageSize.value = val
  pageNum.value = 1
  getData()
}

interface Item {
  des: string;
  icon: string;
  duration: number;
  num: number;
}

const dataList = ref({});
const homeLoading = ref(false)
const topKey = ref(0)
const getCardList = async () => {
  try {
    homeLoading.value = true
    const res = await studentStatistics();
    if (res.code === '00000') {
      dataList.value = res.data ? res.data : {}
      topKey.value = new Date().getTime()
    }
  } catch {
  } finally {
    homeLoading.value = false
  }
};
const questionChange = () => {
  examList()
}
const carChange = () => {
  examList()
}

const examDate = ref('')

const examTimeChange = (e: any) => {
  examDate.value = formatDate(e)
}
const examIds = ref([])
const handleSelectionChange = (e: any) => {
  examIds.value = e.map((item: any) => Number(item.memberId))
}
const submitExam = async () => {
  if (!examDate.value) {
    ElMessage.error('请输入考试时间')
  } else {
    const res = await addExamDate(examIds.value, examDate.value)
    if (res.code === '00000') {
      ElMessage.success('新增成功')
      examDialogVisible.value = false
      getData()
    }
  }
}

onMounted(() => {
  getData()
  getCardsTypeList()
  getCardList()
})
</script>

<style lang="scss" scoped>
.page-content {
  width: 100%;
  height: 100%;
  margin-top: 20px;

  .user {
    .avatar {
      width: 40px;
      height: 40px;
      border-radius: 6px;
    }

    >div {
      margin-left: 10px;

      .user-name {
        font-weight: 500;
        color: var(--art-text-gray-800);
      }
    }
  }
}

.table-bar {
  padding: 0;
}

.examined,
.noExam {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
}

.examined {
  background-color: rgb(38, 195, 38);
  color: #fff;
  width: 20px;
  height: 20px;
}

.noExam {
  width: 18px;
  height: 18px;
  border: 1px solid rgb(38, 195, 38);
  color: #333;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

:deep(.el-dialog__title) {
  font-weight: bold;
}

.column {
  display: flex;
  justify-content: space-between;
  margin-top: var(--console-margin);
  background-color: transparent !important;
}

:deep(.buttons) {
  margin-top: 20px;
}
</style>
